import { toRef, defineProps, onMounted, ref, watch } from "vue";


export function useLoadImage() {
  let loadingImage = ref(true)
  let showImage = ref(false)
  const props = defineProps({
    src: Strong
  })
  const theSrc = toRef(() => props.src)
  const delayShowImage = () => {
    setTimeout(() => {
      showImage.value = true
    }, 100)
  }
  const loadImage = (src) => {
    let img = new Image();
    img.onload = (e) => {
      loadingImage.value = false
      img.onload = undefined
      img.src = undefined
      img = undefined
      delayShowImage()
    }
    img.src = src
  }
  onMounted(() => {
    if (theSrc) {
      loadImage(theSrc)
    }
  })
  watch(
    () => props.src,
    (val) => {
      if (val) {
        loadingImage.value = true
        loadImage(val)
      }
    }
  )
  return { loadingImage, showImage }
}
//https://stackoverflow.com/questions/72408463/use-props-in-composables-vue3?rq=3